/**
 * This plugin creates a decorative frame selector.<p> 
 * 
 * It is intented to be used with the jquery decorative frames plugin.<p>
 * 
 * For styling use:
 * <code>css/decorative-frame-selector.css</code>
 * 
 * @author Michael Moossen mmoossen@gmail.com
 */
;(function($) {
	
	/**
	 * Plugin entry point.<p>
	 * 
	 * @param {String} selectedFrame the frame to select by default, can be <code>null</code>
	 * @param {String} imageUrl the image to use for the preview
	 * @param {Function<String>} callback the callback function to be called when a frame is selected
	 */
	jQuery.fn.decorativeFrameSelector = function(/** {String} */ selectedFrame, /** {String} */ imageUrl, /** {Function<String>} */ callback) {
		var frames = $.decorativeFrames.all;
		return this.each(function() {
			var $frameSelector = $(this);
			// create a preview for each frame
			for(var i=0; i<frames.length; i++) {
				var $frame = $('<li class="ui-state-default"><a href="#"><img src="'+imageUrl+'" alt="image" /><em>'+frames[i]+'</em></a></li>');
				$frameSelector.append($frame);
				var $cnt = $frame.children();
				$cnt.decorativeFrame(frames[i]);
				if (frames[i] == selectedFrame) {
					// select the default
					$frame.addClass('ui-state-active');
				}
			}
			// install click handler
			$frameSelector.find('li').click(function(e) {
				$frameSelector.find('li').removeClass('ui-state-active');
				$(this).addClass('ui-state-active');
				var frame = $(this).find('em').text();
				return callback.apply(this, [frame, e]);
			});			
			$frameSelector.find('li').hover(function() {
				$(this).addClass('ui-state-focus');
			}, function() {
				$(this).removeClass('ui-state-focus');
			});
		});
	};
})(jQuery);
